<template>
  <div class="charts">

      <!-- vue-echarts提供全局组件 -->
      <v-chart :option="getOption()" autoresize></v-chart>
      <!-- <v-chart></v-chart> -->
  </div>
</template>

<script setup lang="ts">
//ehcarts配置项
const getOption = () => {
  return {
      //x轴
      xAxis: {
          show: false, //隐藏x
          max: 100,
          min: 0,
      },
      yAxis: {
          show: false, //隐藏y
          //y轴上均匀分布
          type: "category",
      },
      series: {
          type: "bar",
          //每个柱状图颜色
          data: [30],
          barWidth: 10,
          //背景颜色
          backgroundStyle: {
              color: '#ddd'
          },
          //柱条的颜色
          showBackground: true,//设置柱条的背景颜色，需要变为真
          itemStyle: {
              color: 'hotpink'
          },
          //显示数值
          label: {
              show: true,
              position: 'right',
              //自定义数值
              formatter: "|",
              color: 'skyblue',
          },
      },
      grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
      },
  };
};

</script>

<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>